import { createVNode, render } from "vue";
import Notice from "./message.vue";
let mountNode = null;
// 定义组件通过 js操作渲染消息提示组件，vue3方式
export default (options) => {
    const duration = options.duration | 3000;
    //确保只存在一个弹框，如果前一个弹窗还在，就移除
    if (mountNode) {
        document.body.removeChild(mountNode);
        mountNode = null;
    }
    // vue3的使用
    //将options参数传入，并将Notice组件转换成虚拟DOM，并赋值给app 组件用props接受
    const app = createVNode(Notice, {
        ...options,
        duration,
    });
    //创建定时器，duration时间后将mountNode移除
    let timer = setTimeout(() => {
        document.body.removeChild(mountNode);
        mountNode = null;
        clearTimeout(timer);
    }, duration);
    //创建一个空的div
    mountNode = document.createElement("div");
    //render函数的作用就是将Notice组件的虚拟DOM转换成真实DOM并插入到mountNode元素里
    render(app, mountNode);
    //然后把转换成真实DOM的Notice组件插入到body里
    document.body.appendChild(mountNode);
};
